<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Home</title>

  <!-- google fonts -->  
  <link href="https://fonts.googleapis.com/css2?family=Jost:wght@300;400;600&display=swap" rel="stylesheet">

  <!-- Template CSS -->
  <link rel="stylesheet" href="assets/css/style-starter.css">
</head>

<body>
<!-- header -->
<header id="site-header" class="fixed-top">
  <div class="container">
      <nav class="navbar navbar-expand-lg stroke">
          <a class="navbar-brand" href="index.html">
              <span class="fa fa-laptop"></span> mathigeo
          </a>
          <!-- if logo is image enable this   
      <a class="navbar-brand" href="#index.html">
          <img src="image-path" alt="Your logo" title="Your logo" style="height:35px;" />
      </a> -->
          <button class="navbar-toggler  collapsed bg-gradient" type="button" data-toggle="collapse"
              data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false"
              aria-label="Toggle navigation">
              <span class="navbar-toggler-icon fa icon-expand fa-bars"></span>
              <span class="navbar-toggler-icon fa icon-close fa-times"></span>
              </span>
          </button>

          <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
              <ul class="navbar-nav ml-auto">
                  <li class="nav-item active">
                      <a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a>
                  </li>
                  <li class="nav-item @@about__active">
                      <a class="nav-link" href="about.html">About</a>
                  </li>
                  <li class="nav-item @@contact__active">
                      <a class="nav-link" href="contact.html">Contact</a>
                  </li>
              </ul>
          </div>
          <!-- toggle switch for light and dark theme -->
          <div class="mobile-position">
              <nav class="navigation">
                  <div class="theme-switch-wrapper">
                      <label class="theme-switch" for="checkbox">
                          <input type="checkbox" id="checkbox">
                          <div class="mode-container">
                              <i class="gg-sun"></i>
                              <i class="gg-moon"></i>
                          </div>
                      </label>
                  </div>
              </nav>
          </div>
          <!-- //toggle switch for light and dark theme -->
      </nav>
  </div>
</header>
<!-- //header -->

<!-- banner section -->
<section id="home" class="w3l-banner py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6 col-sm-12 mt-lg-0 mt-4">
                <span class="title-small">Hello</span>
                <h1 class="mb-2 title"> <span>我是</span> 阳海峰 </h1>
                <h1 class="mb-4 title"> 一名 <span class="typed-text"></span><span class="cursor">&nbsp</span></h1>
                <p>很高兴能认识你们，希望我们能合作愉快</p>
                <div class="mt-sm-5 mt-4">
                    <a class="btn btn-primary btn-style mr-2" href="contact.html"> Hire Me </a>
                    <a class="btn btn-outline-primary btn-style mr-2" href="#portfolio"> Portfolio </a>
                </div>
            </div>
            <div class="col-lg-6 col-md-8 col-sm-10 mt-lg-0 mt-4">
                <div class="img-effect text-lg-center">
                    <img src="assets/images/photo.png" alt="myphoto" class="img-fluid">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //banner section -->

<!-- home page about section -->
<section class="w3l-index3" id="about">
    <div class="midd-w3 py-5">
        <div class="container py-lg-5 py-md-3">
            <div class="row">
                <div class="col-lg-4">
                    <div class="position-relative">
                        <img src="assets/images/myphoto.jpg" alt="" class="radius-image img-fluid">
                    </div>
                </div>
                <div class="col-lg-8 mt-lg-0 mt-5">
                    <h5 class="title-small mb-2">WHO AM I?</h5>
                    <h3 class="title-big">我是一个梦想家, 一个喜欢钻研的大学生</h3>
                    <p class="mt-4">我在大一的时候拿了电子设计大赛全国二等奖，湖南赛区一等奖，
                      并在校级C语言竞赛中取得第一名，
                      湖南省物联网应用创新大赛三等奖，
                      并在大二的时候再次拿了湖南省电子设计大赛一等奖和全国数学建模大赛湖南赛区一等奖，
                      并且有一个国家级创新创业项目，在湖南省挑战杯获得铜奖以及其它奖等等。。。</p>
                    <a href="#download" class="btn btn-style btn-primary mt-lg-5 mt-4">Download CV</a>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //home page about section -->

<!-- home page second section -->
<div class="py-5 w3l-resume">
    <div class="container py-lg-5 py-3">
        <h5 class="title-small mb-2"> My resume</h5>
        <h3 class="title-big mb-4">我很乐意分享和一起实现我们的想法 </h3>
        <p>我喜欢数学，计算机，电子，通讯，物联网等领域，我有扎实的功底，
          “希望你们能好好跟我合作，我是不会亏待你们的（^_^）”
        </p>
        <div class="mt-5">
            <a href="#download" class="btn btn-style btn-primary">Download resume</a>
        </div>
    </div>
</div>
<!-- //home page second section -->

<!-- home page services section -->
<section class="w3l-services">
    <div class="blog py-5" id="services">
        <div class="container py-lg-5">
            <h5 class="title-small text-center">Services</h5>
            <h3 class="title-big text-center mb-sm-5 mb-4">我所能为你做的</h3>
            <div class="row">
                <div class="col-md-12 mx-auto pr-2">
                    <div class="owl-two owl-carousel owl-theme">
                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                        <span class="fa fa-pencil-square-o"></span>
                                    </div>
                                    <h4 class="number">01</h4>
                                    <h4><a href="#url">STM32单片机程序设计</a></h4>
                                    <p>在实验室打滚多年，自有一套体系。</p>
                                    <a href="#read" class="read">Read more</a>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                      <span class="fa fa-laptop"></span>
                                    </div>
                                    <h4 class="number">02</h4>
                                    <h4><a href="#url">C/C++ 开发</a></h4>
                                    <p>对C和C++的学习已经到了走火入魔的境界啦！！！.</p>
                                      <a href="#read" class="read">Read more</a>
                                  </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                      <span class="fa fa-area-chart"></span>
                                    </div>
                                    <h4 class="number">03</h4>
                                    <h4><a href="#url">电路设计和系统分析</a></h4>
                                    <p>对数字电子技术和模拟电子技术已经到了炉火纯青的地步了~~~</p>
                                      <a href="#read" class="read">Read more</a>
                                  </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                        <span class="fa fa-pencil-square-o"></span>
                                    </div>
                                    <h4 class="number">04</h4>
                                    <h4><a href="#url">考研分享</a></h4>
                                    <p><del>（还未上岸，且不哔哔赖赖）</del></p>
                                    <a href="#read" class="read">Read more</a>
                                </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                      <span class="fa fa-laptop"></span>
                                    </div>
                                    <h4 class="number">05</h4>
                                    <h4><a href="#url">FreeRTOS开发</a></h4>
                                    <p>熟练使用FreeRTOS嵌入式实时操作系统，
                                      能做内核开发和应用层开发，能写BSP程序</p>
                                      <a href="#read" class="read">Read more</a>
                                  </div>
                            </div>
                        </div>

                        <div class="item">
                            <div class="card">
                                <div class="box-wrap">
                                    <div class="icon">
                                      <span class="fa fa-area-chart"></span>
                                    </div>
                                    <h4 class="number">06</h4>
                                    <h4><a href="#url">图像识别与处理</a></h4>
                                    <p>本人熟练使用openCV for Python,并且会使用OPENMV和K210，
                                      能用C语言处理图像，擅长图像处理的经典算法。
                                    </p>
                                      <a href="#read" class="read">Read more</a>
                                  </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-5 text-more">
                <p class="mt-4 pt-3 sample text-center">
                    <a href="services.html">View All Services <span class="pl-2 fa fa-long-arrow-right"></span></a>
                </p>
            </div>
        </div>
    </div>
</section>
<!-- //home page services section -->

<!-- stats -->
<section class="w3l-stats py-lg-5 py-4" id="stats">
    <div class="gallery-inner container py-md-5 py-4">
        <div class="row stats-con">
            <div class="col-sm-3 col-6 stats_info counter_grid">
                <span class="fa fa-laptop"></span>
                <p class="counter">12</p>
                <h4>完成过的项目</h4>
            </div>
            <div class="col-sm-3 col-6 stats_info counter_grid1">
                <span class="fa fa-hourglass-end"></span>
                <p class="counter">2</p>
                <h4>未完成的项目</h4>
            </div>
            <div class="col-sm-3 col-6 stats_info counter_grid mt-sm-0 mt-5">
                <span class="fa fa-gift"></span>
                <p class="counter">23</p>
                <h4>获得的奖项</h4>
            </div>
            <div class="col-sm-3 col-6 stats_info counter_grid2 mt-sm-0 mt-5">
                <span class="fa fa-smile-o"></span>
                <p class="counter">3</p>
                <h4>被称赞的项目</h4>
            </div>
        </div>
    </div>
</section>
<!-- //stats -->
<!-- testimonials -->
<section class="w3l-clients" id="clients">
    <!-- /grids -->
    <div class="cusrtomer-layout py-5">
        <div class="container py-lg-5 py-md-4">
            <div class="heading text-center mx-auto">
                <h6 class="title-small text-center">Testimonials</h6>
                <h3 class="title-big mb-md-5 mb-4">他们对我的评价 </h3>
            </div>
            <!-- /grids -->
            <div class="testimonial-width">
                <div id="owl-demo1" class="owl-carousel owl-theme mb-4">
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他是一个非常能干的人，我特别欣赏他。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team1.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>John wilson</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他非常耐心地教我英语，尽管他自己语言不好。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>Julia sakura</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他非常沉迷与自己的世界，有时候也容易被别人干扰。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>Roy Linderson</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他很阳光，很帅气，很温柔，责任心重。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team4.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>Mike Thyson</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他总是展示积极的一面，快乐带给别人，郁闷留给自己。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team2.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>Laura gill</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="item">
                        <div class="testimonial-content">
                            <div class="testimonial">
                                <blockquote>
                                    <q>他总是很深情，尽管没人这么认为。</q>
                                </blockquote>
                                <div class="testi-des">
                                    <div class="test-img"><img src="assets/images/team3.jpg" class="img-fluid" alt="client-img">
                                    </div>
                                    <div class="peopl align-self">
                                        <h3>Smith Johnson</h3>
                                        <p class="indentity">Seattle, Washington</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /grids -->
    </div>
    <!-- //grids -->
</section>
<!-- //testimonials -->

<!-- home page video popup section -->
<section class="w3l-index5" id="about">
    <div class="new-block py-5">
        <div class="container py-lg-5">
            <div class="middle-section text-center">
                <div class="section-width">
                    <h3 class="title-big">让我们互相加入吧！做一些有趣的事情去改变世界。</h3>
                    <p class="mt-3"><mark>如果能够收到你的回应，那我将不胜感激！</mark></p>
                </div>
                <div class="history-info mt-5">
                    <div class="position-relative">
                        <img src="assets/images/bg.jpg" class="img-fluid radius-image video-popup-image"
                            alt="video-popup">

                        <a href="#small-dialog" class="popup-with-zoom-anim play-view text-center position-absolute">
                            <span class="video-play-icon">
                                <span class="fa fa-play"></span>
                            </span>
                        </a>

                        <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
                        <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                            <iframe src="#" allowfullscreen></iframe>
                        </div>
                    </div>
                </div>

                <!-- dialog itself, mfp-hide class is required to make dialog hidden -->
                <div id="small-dialog" class="zoom-anim-dialog mfp-hide">
                    <iframe src="#" allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- //home page video popup section -->

 <!-- freelance hire me -->
 <section class="w3l-grid-quote text-center py-5">
   <div class="container py-3">
     <h6 class="title-small">Get in touch</h6>
     <h3 class="title-big mb-md-5 mb-4">让我们开始吧</h3>
     <a href="contact.html" class="btn btn-style btn-primary mr-2">Hire Me </a>
     <a href="contact.html" class="btn btn-style btn-outline-primary">Get in touch</a>
   </div>
 </section>
 <!-- //freelance hire me -->
 
<!-- Footer -->
<section class="w3l-footer py-sm-5 py-4">
  <div class="container">
    <div class="footer-content">
      <div class="row">
        <div class="col-lg-8 footer-left">
          <p class="m-0">Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://www.zzandff.com/"></a></p>
        </div>
        <div class="col-lg-4 footer-right text-lg-right text-center mt-lg-0 mt-3">
          <ul class="social m-0 p-0">
            <li><a href="#facebook"><span class="fa fa-facebook-official"></span></a></li>
            <li><a href="#linkedin"><span class="fa fa-linkedin-square"></span></a></li>
            <li><a href="#instagram"><span class="fa fa-instagram"></span></a></li>
            <li><a href="#twitter"><span class="fa fa-twitter"></span></a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>

  <!-- move top -->
  <button onclick="topFunction()" id="movetop" title="Go to top">
    <span class="fa fa-angle-up"></span>
  </button>
  <script>
    // When the user scrolls down 20px from the top of the document, show the button
    window.onscroll = function () {
      scrollFunction()
    };

    function scrollFunction() {
      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("movetop").style.display = "block";
      } else {
        document.getElementById("movetop").style.display = "none";
      }
    }

    // When the user clicks on the button, scroll to the top of the document
    function topFunction() {
      document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  </script>
  <!-- /move top -->
</section>
<!-- //Footer -->

<!-- all js scripts and files here -->

<script src="assets/js/theme-change.js"></script><!-- theme switch js (light and dark)-->

<script src="assets/js/jquery-3.3.1.min.js"></script><!-- default jQuery -->

<!-- /typig-text-->
<script>
  const typedTextSpan = document.querySelector(".typed-text");
  const cursorSpan = document.querySelector(".cursor");

  const textArray = ["在读本科生", "电子爱好者", "编程达人"];
  const typingDelay = 200;
  const erasingDelay = 10;
  const newTextDelay = 100; // Delay between current and next text
  let textArrayIndex = 0;
  let charIndex = 0;

  function type() {
    if (charIndex < textArray[textArrayIndex].length) {
      if (!cursorSpan.classList.contains("typing")) cursorSpan.classList.add("typing");
      typedTextSpan.textContent += textArray[textArrayIndex].charAt(charIndex);
      charIndex++;
      setTimeout(type, typingDelay);
    } else {
      cursorSpan.classList.remove("typing");
      setTimeout(erase, newTextDelay);
    }
  }

  function erase() {
    if (charIndex > 0) {
      // add class 'typing' if there's none
      if (!cursorSpan.classList.contains("typing")) {
        cursorSpan.classList.add("typing");
      }
      typedTextSpan.textContent = textArray[textArrayIndex].substring(0, 0);
      charIndex--;
      setTimeout(erase, erasingDelay);
    } else {
      cursorSpan.classList.remove("typing");
      textArrayIndex++;
      if (textArrayIndex >= textArray.length) textArrayIndex = 0;
      setTimeout(type, typingDelay);
    }
  }

  document.addEventListener("DOMContentLoaded", function () { // On DOM Load initiate the effect
    if (textArray.length) setTimeout(type, newTextDelay + 250);
  });
</script>
<!-- //typig-text-->

<!-- services owlcarousel -->
<script src="assets/js/owl.carousel.js"></script>

<!-- script for services -->
<script>
  $(document).ready(function () {
    $('.owl-two').owlCarousel({
      loop: true,
      margin: 30,
      nav: false,
      responsiveClass: true,
      autoplay: false,
      autoplayTimeout: 5000,
      autoplaySpeed: 1000,
      autoplayHoverPause: false,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        480: {
          items: 1,
          nav: false
        },
        700: {
          items: 1,
          nav: false
        },
        1090: {
          items: 3,
          nav: false
        }
      }
    })
  })
</script>
<!-- //script for services -->

<!-- script for tesimonials carousel slider -->
<script>
  $(document).ready(function () {
    $("#owl-demo1").owlCarousel({
      loop: true,
      margin: 20,
      nav: false,
      responsiveClass: true,
      responsive: {
        0: {
          items: 1,
          nav: false
        },
        736: {
          items: 1,
          nav: false
        },
        1000: {
          items: 2,
          nav: false,
          loop: false
        }
      }
    })
  })
</script>
<!-- //script for tesimonials carousel slider -->

<!-- video popup -->
<script src="assets/js/jquery.magnific-popup.min.js"></script>
<script>
  $(document).ready(function () {
    $('.popup-with-zoom-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: false,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-zoom-in'
    });

    $('.popup-with-move-anim').magnificPopup({
      type: 'inline',

      fixedContentPos: false,
      fixedBgPos: true,

      overflowY: 'auto',

      closeBtnInside: true,
      preloader: false,

      midClick: true,
      removalDelay: 300,
      mainClass: 'my-mfp-slide-bottom'
    });
  });
</script>
<!-- //video popup -->

<!-- stats number counter-->
<script src="assets/js/jquery.waypoints.min.js"></script>
<script src="assets/js/jquery.countup.js"></script>
<script>
  $('.counter').countUp();
</script>
<!-- //stats number counter -->

<!-- disable body scroll which navbar is in active -->
<script>
  $(function () {
    $('.navbar-toggler').click(function () {
      $('body').toggleClass('noscroll');
    })
  });
</script>
<!-- disable body scroll which navbar is in active -->

<!--/MENU-JS-->
<script>
  $(window).on("scroll", function () {
    var scroll = $(window).scrollTop();

    if (scroll >= 80) {
      $("#site-header").addClass("nav-fixed");
    } else {
      $("#site-header").removeClass("nav-fixed");
    }
  });

  //Main navigation Active Class Add Remove
  $(".navbar-toggler").on("click", function () {
    $("header").toggleClass("active");
  });
  $(document).on("ready", function () {
    if ($(window).width() > 991) {
      $("header").removeClass("active");
    }
    $(window).on("resize", function () {
      if ($(window).width() > 991) {
        $("header").removeClass("active");
      }
    });
  });
</script>
<!--//MENU-JS-->

<!-- bootstrap js -->
<script src="assets/js/bootstrap.min.js"></script>

</body>

</html>